<template>
	<view>
		<view class="bg-white d-flex seach j-center a-center py-2">
			<view class="bg-light-secondary span-18 rounded-50 d-flex py-1 ">
				<u-icon name="search" color="#888888" size="33" class="mx-2"></u-icon>
				<input type="text" confirm-type="search" @confirm="seach" focus :focus="firstFocus" placeholder="搜索商品名称" v-model="keywords" @input="seachInput" />
			</view>
		</view>
		
		<scroll-view scroll-y="true" :style="{height: scrollHeight}">
			<view v-if="seach_show" class=" d-flex flex-column j-center a-center h_100 pb-3">
				<view class="pb-2">你也可以:</view>
				<view class="py-1 px-4 border border-danger text-danger rounded-30" @click="advSeach">高级搜索</view>
			</view>
			<view v-else-if="!arr.length" class="d-flex flex-column j-center a-center h_100 pb-3">
				<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
				<view class="">暂无商品</view>
			</view>	
		<!-- 在售商品 -->
			<view class="wrap deep" v-else>
				<view class="">
						<view  class="goods_card bg-white m-2 p-3 rounded-20" v-for="(item,index) in saleList" :key="index">
							<view class="goods_card_head d-flex"  @click="goodsEdit(item)">
								<view class="goods_card_head_left position-relative ">
									<view v-if="item.has_product=='yes'" class="text-white goods_logo">多货品</view>
									<image class="" :src="item.img.url?item.img.url:defaltImage" mode=""></image>
								</view>
								<view class="goods_card_head_right pl-3">
									<view class="d-flex">
										<view class="ellipsis pro_name">
											<image v-if="item.is_hot" src="../../static/images/goods/icon_goods_hot.png" class="mr" mode=""></image>
											<image v-if="item.is_new" src="../../static/images/goods/icon_goods_new.png" class="mr" mode=""></image>
											<image v-if="item.is_best" src="../../static/images/goods/icon_goods_best.png" class="mr" mode=""></image>
											<image v-if="item.is_promote" src="../../static/images/goods/promotion.png" class="mr" mode=""></image>
											{{item.name}}
										</view>
									</view>
									<view class="text-light-muted font-md my pt-2">
										<text class="mr-3">库存：{{item.stock}}</text>
										<text>销量：{{item.sales_volume}}</text>
									</view>
									<view class="mt-1 pt">
										<text class="text-danger mr-2 font-35">{{item.shop_price}}</text><text class="font-md text-light-muted tex line-through">{{item.market_price}}</text>
									</view>
								</view>
							</view>
						</view>
					<!-- 商品回收站 -->
						<view   class="m-2 p-2 rounded-20 bg-white" v-for="(item,index) in recyList" :key="index">
							<view class="">
								<view class="ellipsis">{{item.name}}</view>
							</view>
							<view class="font pt-1">货号：{{item.goods_sn}}</view>
							<view class="py-2">
								<text class="text-danger font-md">{{item.shop_price}}</text><text class="ml-2 font">原价:&nbsp;&nbsp;{{item.market_price}}</text>
							</view>
							<view class="d-flex j-end">
								<text class="px-4 py-1 restore font" @click="recy(item)">还原</text>
							</view>
						</view>
					<!-- 售罄商品 -->
					<view  class="goods_card bg-white m-2 p-3 rounded-20" v-for="(item,index) in soldoutList" :key="index">
						<view class="goods_card_head d-flex"  @click="goodsEdit(item)">
							<view class="goods_card_head_left position-relative ">
								<view v-if="item.has_product=='yes'" class="text-white goods_logo">多货品</view>
								<image class="" :src="item.img.url?item.img.url:defaltImage" mode=""></image>
							</view>
							<view class="goods_card_head_right pl-3">
								<view class="d-flex">
									<view class="ellipsis pro_name">
										<image v-if="item.is_hot" src="../../static/images/goods/icon_goods_hot.png" class="mr" mode=""></image>
										<image v-if="item.is_new" src="../../static/images/goods/icon_goods_new.png" class="mr" mode=""></image>
										<image v-if="item.is_best" src="../../static/images/goods/icon_goods_best.png" class="mr" mode=""></image>
										<image v-if="item.is_promote" src="../../static/images/goods/promotion.png" class="mr" mode=""></image>
										{{item.name}}
									</view>
								</view>
								<view class="text-light-muted font-md my pt-2">
									<text class="mr-3">库存：{{item.stock}}</text>
									<text>销量：{{item.sales_volume}}</text>
								</view>
								<view class="mt-1 pt">
									<text class="text-danger mr-2 font-35">{{item.shop_price}}</text><text class="font-md text-light-muted tex line-through">{{item.market_price}}</text>
								</view>
							</view>
						</view>
					</view>	
			</view>
			</view>
		</scroll-view>
		<!-- 还原提示 -->
		<u-modal v-model="recyShow" title="还原提示" show-title="false"  show-confirm-button show-cancel-button cancel-color confirm-color @confirm="confirm_recy">
			<view class="py-3">
				<view class="text-center">你确定要将商品重新上架吗?</view>
			</view>
		</u-modal>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaltImage:'../../static/images/goods/icon_default_image.png',
				arr:[],
				seach_show:true,
				seach_flag:false,
				keywords:"", // 关键字
				recyList:[],// 商品回收站
				soldoutList:[], // 售罄商品
				recyShow:false,
				number:null,  // 售罄
				recycleShow:false,	// 商品回收站
				saleList:[], // 在售商品
				goods_id:"", // 还原商品ID
				firstFocus:true,
				scrollHeight:0,// 屏幕高度
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.seach').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		onLoad(e) {
			if(e.number){
				this.number=JSON.parse(e.number) 
			}else if(e.recycleShow){
				this.recycleShow=JSON.parse(e.recycleShow)
			}
		},
		methods: {
			// 监听input框
			seachInput(e){
				this.keywords=e.detail.value
			},
			// 搜索
			seach(){
				if(this.keywords.length!=0){
					this.$H.post("admin/merchant/goods/search",{keywords:this.keywords}).then(res=>{
						if(this.number==0){
							// 售罄商品
							this.arr=res.data
							this.$H.post("admin/merchant/goods/list",{
								list_type:"soldout",
								keywords:this.keywords,
							}).then(soldout_res=>{
								this.soldoutList=soldout_res.data
								this.seach_show=false
							})
							
						}else if(this.recycleShow){ 
							this.arr=res.data
							// 商品回收站
							this.$H.post("admin/goods/trash/list",{
								keywords:this.keywords,
							}).then(recy_res=>{
								this.recyList=recy_res.data
								this.seach_show=false
							})
							
						}else{
							this.arr=res.data
							this.$H.post("admin/merchant/goods/list",{
								list_type:"selling",
								keywords:this.keywords,
							}).then(sale_res=>{
								this.saleList=sale_res.data
								this.seach_show=false
							})
							
						}
					})
					console.log(11)
				}else{
					this.arr=""
				}
			},
			// 模态框开关
			recy(item){
				this.recyShow=true
				this.goods_id=item.goods_id
				console.log(item.goods_id)
			},
			// 确认
			confirm_recy(){
				this.$H.post("admin/goods/restore",{id:this.goods_id}).then(res=>{
					uni.showToast({
						title:"还原成功",
						duration: 2000
					})
					this.$H.post("admin/goods/trash/list").then(res=>{
						this.recyList=res.data
					})
				})
			},
			// 高级搜索
			advSeach(){
				uni.navigateTo({
					url:"/pages/goods-advSeach/goods-advSeach"
				})
			},
			// 详情
			goodsEdit(item){
				uni.navigateTo({
					url:"/pages/goods-edit/goods-edit?goods_id="+item.goods_id
				})
			},
		}
	}
</script>

<style>
	.icon_no_data{
		width: 250upx;
		height: 250upx;
	}
	.restore{
		border-radius: 40upx;
		border: 1px solid #555;
	}
	/* 售罄商品 */
	.goods_img{
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
	}
	.goods_card_head_left{
	}
	.goods_card_head_left image{
		width: 180upx;
		height: 180upx;
		border-radius: 20upx;
	}
	.goods_card_head_right image{
		width: 30upx;
		height: 30upx;
	}
	.goods_card_content_footer view{
		border: 1px solid #808080;
		padding: 8upx 30upx;
		margin-right: 10upx;
		border-radius: 30upx;
	}
	.popupImg{
		width: 170upx;
		height: 170upx;
	}
	.deep /deep/ button{
		width: 70%;
		border-radius: 50upx;
		font-size: 30upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.icon_no_data{
		width: 250upx;
		height: 250upx;
	}
	
	.goods_logo{
		font-size: 25upx;
		padding: 7upx 10upx;
		border-radius: 10upx 20upx 20upx 0;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(242,79,45,0.8);
		z-index: 11;
	}
</style>
